<template>
  <div id="up">
    <!-- {{ pcaData }} -->
    <!-- {{form}} -->
    <!-- :props='{value:"label"}'是将数据对象内的label值为最终选中的值 -->
    <!-- v-model='pcaData'最初选中的是数值，要将其变为中文->:props='{value:"label"}' -->
    <div >
        <el-row>
          <el-button class="appear" size='small' @click="toJump" >
            返回列表</el-button>
        </el-row>
      </div>
    <div class="pcaDiv">
     <el-card shadow="hover">
    <el-cascader-panel @change="pcaChange" :props="{ value: 'label' }" v-model="pcaData"
    :options="regionData">
    </el-cascader-panel>
     </el-card>
     </div>
    <div class="formDivParent">
      <div class="formDiv">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
          <!-- type='number' ->数值输入框-->
          <el-form-item label="确诊" prop="confirmed" size="small">
            <el-input type="number" v-model="form.confirmed"  min='0'></el-input>
          </el-form-item>
          <el-form-item label="疑似" prop="suspected" size="small">
            <el-input type="number" v-model="form.suspected"  min='0'></el-input>
          </el-form-item>
          <el-form-item label="死亡" prop="dead" size="small">
            <el-input type="number" v-model="form.dead"  min='0'></el-input>
          </el-form-item>
          <el-form-item label="治愈" prop="cure" size="small">
            <el-input type="number" v-model="form.cure" min='0'></el-input>
          </el-form-item>
          <el-form-item label="重症" prop="severe" size="small">
            <el-input type="number" v-model="form.severe" min='0'></el-input>
          </el-form-item>
          <el-form-item label="境外输入" prop="outside" size="small">
            <el-input type="number" v-model="form.outside" min='0'></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">上报</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      
      <div class="tipDiv">
        <!-- <el-divider direction="vertical"></el-divider> -->
        <el-divider direction="vertical"></el-divider>温馨提示：<br />
        <el-divider direction="vertical"></el-divider>1. 选中城市<br />
        <el-divider direction="vertical"></el-divider>2. 录入数据<br />
       <el-divider direction="vertical"></el-divider> 疫情防控，众志成城<br />
      </div>
    </div>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import axios from "../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
      regionData,
      pcaData: "",
      // 提交给后台的数据
      form: {
        country: "中国",
        province: "",
        city: "",
        area: "",
        confirmed: "",
        suspected: "",
        dead: "",
        cure: "",
        severe: "",
        outside: "",
      },
      rules: {
        confirmed: [
          { required: true, message: "请正确的确诊数量", trigger: "blur" },
        ],
        suspected: [
          { required: true, message: "请正确的疑似数量", trigger: "blur" },
        ],
        dead: [
          { required: true, message: "请正确的死亡数量", trigger: "blur" },
        ],
        cure: [
          { required: true, message: "请正确的治愈数量", trigger: "blur" },
        ],
        severe: [
          { required: true, message: "请正确的重症数量", trigger: "blur" },
        ],
        outside: [
          { required: true, message: "请正确的境外数量", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    moment,
    toJump(){
      this.$router.push('/list');

    },
     submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        //   验证省市区数据
        if(this.pcaData.length==0){
            this.$notify({
            title: '提示',
            message: '请选择省市区',
            type: "warning",
          });
            return;
        }
        if (valid) {
            
          //   保存或更新数据
          // alert('submit!');
          // 离其最近的函数
          let res = await axios.post("/epidemic/saveOrUpdate", this.form);
          this.$notify({
            title: res.status == 200 ? "成功" : "失败",
            message: res.statusText,
            type: res.status == 200 ? "success" : "error",
            // showClose: false,
          });
          this.form = {};
          this.pcaData = [];
          // this.pcaChange();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    moment,

    //   val是传入的省市区的参数
    async pcaChange(val) {
      //   console.log(val);
      //   找该省市区当天的数据，若当天有数据，在表单中填充，做修改操作，若当天没有数据，表单清空，
      // 做新增操作
     let res = await axios.get("/epidemic/pageQuery", {
        params: {
          page: 1,
          pageSize: 10,
          province: val[0],
          city: val[1],
          area: val[2],
          inputTime: moment(new Date()).format("YYYY-MM-DD"),
        },
      });

      // console.log(res.data.list);
      if (res.data.list.length == 0) {
        // 没有数据 清空下方表单 但省市区依旧存在
        // 新增
        this.form = {
          country: "中国",
          province: val[0],
          city: val[1],
          area: val[2],
          confirmed: "",
          suspected: "",
          dead: "",
          cure: "",
          severe: "",
          outside: "",
        };
      } else {
        this.form = {
          ...res.data.list[0],
        };
      }
    },
    //   axios.get('/epidemic/pageQuery',{params:{
    //       page:1,
    //       pageSize:10,
    //       province:,
    //       city:,
    //       area:,
    //       inputTime:
    //   }})
  },
  created() {
    this.$route.query;
  },
  mounted() {},
};
</script>
<style scoped>
.appear{
  background-color : #2cb5ac;
  box-shadow:0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  color: white;
}
/* .formDivParent::after 在页面之后创建一个元素  伪元素选择器、 */
/* BFC 跨级格式化上下文    */
.formDivParent {
  /* 父元素所有的子元素均浮动起来，其父元素的高度为0， */
  /* 清楚子元素浮动对父元素产生的影响 */
  overflow: hidden;
  margin-top: 15px;
}
.formDiv {
  float: left;
  width: 50%;
  /* margin-left: 20px; */
}
.tipDiv {
  float: left;
  color: red;
  margin-left: 20px;
  font-size: 12px;
  line-height: 20px;
  font-weight: bold;
}
.pcaDiv{
  /* text-align: center; */
  margin-left: 10px;
}

</style>